<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="1" :offset="10" v-if="userRole==1||userRole==2">
        <h4>
          <el-link type="primary" href="/knowledge">心理知识</el-link>
        </h4>
      </el-col>
      <el-col :span="1" v-if="userRole==1||userRole==2">
        <h4><el-link type="primary" href="/consult">{{userRole==1?"在线咨询":"在线回复"}}</el-link></h4>
      </el-col>
      <el-col :span="1" v-if="userRole==1||userRole==2">
        <h4><el-link type="primary" href="/community">心理社区</el-link></h4>
      </el-col>
      <el-col :span="1" v-if="userRole==1||userRole==2">
        <h4><el-link type="primary" href="/evaluation">心理评测</el-link></h4>
      </el-col>
      <!-- 咨询师的功能 -->
       <el-col :span="1" v-if="userRole==2">
        <h4><el-link type="primary" href="/knowledge/publishknowledge">发布知识</el-link></h4>
      </el-col>
       <el-col :span="1"  v-if="userRole==2">
        <h4><el-link type="primary" href="/evaluation/publishevaluation">发布评测</el-link></h4>
      </el-col>

      <!-- 管理员功能 -->
      <el-col :span="2" :offset="7" v-if="userRole==3">
        <h4>
          <el-link type="primary" href="/admin/usermanage">用户管理</el-link>
        </h4>
      </el-col>
      <el-col :span="2" v-if="userRole==3">
        <h4>
          <el-link type="primary" href="/admin/knowledgemanage">心理知识管理</el-link>
        </h4>
      </el-col>
       <el-col :span="2" v-if="userRole==3">
        <h4>
          <el-link type="primary" href="/admin/consultmanage">咨询信息管理</el-link>
        </h4>
      </el-col>
      <el-col :span="2" v-if="userRole==3">
        <h4>
          <el-link type="primary" href="/admin/communitymanage">心理社区管理</el-link>
        </h4>
      </el-col>
      <el-col :span="2" v-if="userRole==3">
        <h4>
          <el-link type="primary" href="/admin/evaluationmanage">心理评测管理</el-link>
        </h4>
      </el-col>

      <el-col :span="1" :offset="5" class="user-info" v-if="userRole==1">
        <div class="my-font">{{role}}:</br>{{username}}</div>
      </el-col>
      <el-col :span="1" :offset="3" class="user-info" v-if="userRole==2">
        <div class="my-font">{{role}}:</br>{{username}}</div>
      </el-col>
      <el-col :span="1" :offset="2" class="user-info" v-if="userRole==3">
        <div class="my-font">{{role}}:</br>{{username}}</div>
      </el-col>
      <el-col :span="3"  class="user-info">
        <div class="user-info-div">
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right my-icon"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
               <el-dropdown-item @click.native="toManageCenter">管理中心</el-dropdown-item>
              <el-dropdown-item  @click.native="toPersonalCenter">个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="exitLogin"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="user-info-div">
          <el-avatar icon="el-icon-user-solid" :src="avatarFullPath"></el-avatar>
        </div>
      </el-col>
    </el-row>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Nav",
  components: {},
  created() {
    this.setUserInfo();
  },
  data() {
    return {
      username: "",
      avatar: "", //图片名称
      avatarFullPath: "",
      userRole: 1,
    };
  },
  computed: {
    role() {
      if (this.userRole == 1) return "用户";
      if (this.userRole == 2) return "咨询师";
      if (this.userRole == 3) return "管理员";
    },
  },
  methods: {
    //退出登录
    exitLogin() {
      this.$message({
        message: "已退出登录！",
        type: "success",
        offset: 150,
      });
      this.clearUserInfo();
      this.$router.replace("/");
    },
    //设置用户名和头像
    setUserInfo() {
      //根据userId获取用户名和头像
      this.$request.getHttp({
        url: "/user/getUserInfoById",
        params: {
          userId: localStorage.getItem("userId"),
        },
        success: (data) => {
          if (data.code == 200) {
            console.log(data.user);
            this.username = data.user.username;
            this.avatar = data.user.avatar;
            this.avatarFullPath = `${this.$store.state.ipAddr}/${this.avatar}`;
            this.userRole = data.user.userrole;
          }
        },
        error: (error) => {},
      });

      // this.username = localStorage.getItem("userName");
      // this.avatar = localStorage.getItem("avatar");
    },

    //清除用户信息
    clearUserInfo() {
      // 清空所有LocalStorage数据
      localStorage.clear();
    },
    //跳转到管理中心
    toManageCenter() {
      this.$router.push("/managecenter");
    },
    //跳转到用户中心
    toPersonalCenter() {
      this.$router.push("/personalcenter");
    },
  },
};
</script>

<style scoped>
.my-font {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: bold;
}
.user-info {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.user-info-div {
  padding-left: 10px;
}

.my-icon {
  cursor: pointer;
}
</style>
